import React, { useState, useRef } from "react";
import { CaretLeftOutlined } from "@ant-design/icons";
import { CSSTransition } from "react-transition-group";
import { Button } from 'antd';
import { useChatStore } from "@/store";
import { PlusCircleOutlined } from '@ant-design/icons';
import ChatList from "./chatList";
import "./index.css";

interface IAsideFuncProps {
  onClickConversation: (conversationId:number) => void
}
export default React.FC<IAsideFuncProps> = (props: IAsideFuncProps) => {
  const { onClickConversation } = props
  const { createNewConversationAction } = useChatStore(state => state)
  const [isOpen, setIsOpen] = useState(true);
  const nodeRef = useRef(null);
  const createNewChat= () => {
    createNewConversationAction()
  }
  return (
    <>
      <CSSTransition
        in={isOpen}
        timeout={300}
        nodeRef={nodeRef}
        classNames={{
          enter: "slide-enter",
          enterActive: "slide-enter-active",
          exit: "slide-exit",
          exitActive: "slide-exit-active",
          enterDone: "slide-enter-done",
          exitDone: "slide-exit-done"
        }}
      >
        <div className="c_aside_wrapper" ref={nodeRef}>
          <div className="c_aside_trigger" onClick={() => setIsOpen(!isOpen)}>
            <CaretLeftOutlined className="c_aside_trigger_icon"/>
          </div>
          <div className="c_aside_content">
            <Button onClick={() => createNewChat()} color="primary" variant="dashed" size='large' icon={<PlusCircleOutlined />} iconPosition='left' block shape='round'>
              新建对话
            </Button>
            <ChatList onClickConversation={onClickConversation}/>
          </div>
        </div>
      </CSSTransition>
    </>
  );
};
